<template>
    <div>
        <el-container>
            <el-header class="bg-purple-500 text-light-100 flex justify-center" style="height: calc(10vh)"><Header></Header></el-header>

            <el-container>
                <div>
                    <el-aside class="aside-s">
                        <Aside></Aside>
                    </el-aside>
                </div>
                <el-container>
                    <Breadcrumb class="border-2 breadcrumb-s"></Breadcrumb>
                    <el-main class=" bg-yellow-100" style="height: calc(81vh)"><RouterView></RouterView></el-main>
                    <el-footer class="bg-blue-gray-300 flex justify-center content-center" style="height: calc(5vh)"><Footer></Footer></el-footer> 
                </el-container>

            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import Aside from './layout_aside.vue'
import Footer from './layout_footer.vue'
import Header from './layout_header.vue'
import Breadcrumb from './breadcrumb.vue'

</script>

<style>
.aside-s{
    background-color: #545c64;
    height: calc(90vh);
    width:calc(15vh);
}
.breadcrumb-s{
    display: flex;
    height: calc(4vh);
    width:100%;
    align-items:auto;
}

</style>